import React, { memo, useEffect } from "react";
import { useDispatch } from "react-redux";

import { Layout } from "antd";
import { AdminWrapper } from "./style";
import OrderHeader from "./cpns/OrderHeader";
import OrderSider from "./cpns/OrderSider";
import OrderContent from "./cpns/OrderContent";

import { fetchCoffeeDataAction } from "@/store/modules/coffee";

import { useAppSelector } from "@/store";
import FixCar from "./cpns/FixCar";

const admin = memo(() => {
  const { coffeeLists, coffeeSelection, coffeeOrder } = useAppSelector(
    (state) => ({
      coffeeLists: state.coffee.coffeeLists,
      coffeeSelection: state.coffeeSelection,
      coffeeOrder: state.coffeeOrder,
    })
  );

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchCoffeeDataAction());
  });

  return (
    <AdminWrapper>
      <Layout className="layout">
        <OrderHeader allOrder={coffeeOrder.allOrder} />
        <Layout className="layout-bottom">
          <OrderSider />
          <OrderContent coffeeData={coffeeLists} selection={coffeeSelection} />
        </Layout>
      </Layout>
      <FixCar coffeeOrder={coffeeOrder.shopCar.order} />
    </AdminWrapper>
  );
});

export default admin;
